<template>
	<view class="wrap">
		<view class="header1">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<view class="userinfo">
					<view class="image">
						
						<!-- https://oss.6mate.cn/mini/minidefaultavatar.png -->
						<u-avatar size="100" :src="info.avatar?info.avatar:'https://oss.6mate.cn/mini/minidefaultavatar.png'">
						</u-avatar>
					</view>

					<!-- <button  class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				    <image class="img" :src="userInfo.avatarUrl ? userInfo.avatarUrl : '/static/aidex/images/user01.png'"></image>
				</button> -->

					<view style="flex: 1;">
						<view class="info">
							<view>
								<view class="username">{{info.realName|| ''}}
									<text>{{info.miniUserTypeName}}</text>
								</view>

							</view>
							<view class="sign-in-images more">
								{{info.province|| ''}}{{info.city|| ''}}
								<!-- 头像修改
							<image class="u-m-l-10" src="
https://oss.6mate.cn/mini/narrow.png"
								mode="">
							</image> -->
							</view>

						</view>
						<view class="info dif">
							<view class="ids">
								<view>ID:{{info.code|| ''}}<text></text>
								</view>
							</view>
							<view class="date">
								<!-- 服务到期日： -->

							</view>
						</view>

					</view>

				</view>
			</button>

		</view>
		<view class="list">
			<view class="navList">

				<view class="item">
					<view @click="navTo('/pages/sys/user/comment')" class="left">
						<view class="icon">
							<image src="https://oss.6mate.cn/mini/yijianfankui.png" mode=""></image>
						</view>
						问题反馈
					</view>
					<view class="more">
						<image src="https://oss.6mate.cn/mini/narrow.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<view @click="navTo('/pages/sys/home/notice')" class="left">
						<view class="icon">
							<image src="https://oss.6mate.cn/mini/gonggaozhongx.png" mode=""></image>
						</view>
						公告中心
					</view>
					<view class="more">
						<image src="https://oss.6mate.cn/mini/narrow.png" mode=""></image>
					</view>
				</view>
				
				
				<!-- <view class="item">
					<view @click="navTo('/pages/sys/user/about')" class="left">
						<view class="icon">
							<image src="
https://oss.6mate.cn/mini/user/2.png" mode=""></image>
						</view>
						联系客服
					</view>
					<view class="more">
						<image src="
https://oss.6mate.cn/mini/narrow.png" mode=""></image>
					</view>
				</view> -->
				<view class="item">
					<view @click="navTo('/subPack/mine/card')" class="left">
						<view class="icon">
							<image src="https://oss.6mate.cn/mini/user/2.png" mode=""></image>
						</view>
						提现账号
					</view>
					<view class="more">
						<image src="https://oss.6mate.cn/mini/narrow.png" mode=""></image>
					</view>
				</view>
				<view class="item" @click="navTo('/pages/sys/user/renew') ">
					<view class="left">
						<view class="icon">
							<image src="https://oss.6mate.cn/mini/user/3.png" mode=""></image>
						</view>
						服务开通续费
					</view>
					<view class="more" style="display: flex; align-items: center; color: #999;">
						{{info.expireTime|| ''}}到期
						<image src="https://oss.6mate.cn/mini/narrow.png" mode=""></image>
					</view>
				</view>
				<!-- <view class="item">
					<view class="left" >
						<view class="icon">
							<image src="
https://oss.6mate.cn/mini/user/4.png" mode="">
							</image>
						</view>
						服务购买记录
					</view>
					<view class="more" style="display: flex; align-items: center; color: #999;">
						{{info.expireTime|| ''}}到期
						<image src="
https://oss.6mate.cn/mini/narrow.png" mode=""></image>
					</view>
				</view> -->
				<view @click="navTo('/pages/sys/user/pwd')" class="item">
					<view class="left">
						<view class="icon">
							<image src="https://oss.6mate.cn/mini/user/5.png" mode=""></image>
						</view>
						密码修改
					</view>
					<view class="more">
						<image src="https://oss.6mate.cn/mini/narrow.png" mode=""></image>
					</view>
				</view>
				<view @click="navTo('/pages/sys/user/setting')" class="item">
					<view class="left">
						<view class="icon">
							<image src="https://oss.6mate.cn/mini/user/6.png" mode=""></image>
						</view>
						设置
					</view>
					<view class="more">
						<image src="https://oss.6mate.cn/mini/narrow.png" mode=""></image>
					</view>
				</view>


			</view>
		</view>
		<!-- 服务到期 -->
		<u-popup close-icon-color="#0F1417" close-icon-size="30" v-model="transferToAppMask" :closeable="true"
			:border-radius="30" mode="center">
			<view class="toAppBox">
				<image class="icons" src="https://oss.6mate.cn/mini/user/7.png" mode=""></image>
				<view class="end">
					服务已到期
				</view>
				<view class="datas">
					到期日：{{info.expireTime|| ''}}
				</view>
				<view class="item1">
					<u-button shape="circle" type="error" @click="renew" :ripple="true" ripple-bg-color="#d7d8da">去续费
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {
					avatarUrl: ""
				},
				info: null,
				iconSize: 38,
				transferToAppMask: false
			};
		},
		onShow() {
			this.FnloginUser()

		},

		methods: {


			// 获取微信头像
			onChooseAvatar(e) {
				console.log(e, 4444444);
				this.info.avatar = e.detail.avatarUrl; //头像地址
				uni.uploadFile({
					url: 'https://api-test.sixbg.com/oss/file/upload',
					// header: {
					// 	'content-type': 'multipart/form-data',
					// 	'Authorization':'Bearer '+this.vuex_token
					// },
					filePath: e.detail.avatarUrl,
					name: 'file',
					// formData: {
					// 	'file': e.detail.avatarUrl,
					// 	groupName:'coverImg'
					// },
					success: (res) => {
						console.log();

						this.$u.api.updateAvatar({
								avatar: JSON.parse(res.data).data
							})
							.then(res1 => {

							});
					}
				});

			},


			FnloginUser() {

				this.$u.api.loginUser()
					.then(res => {
						this.info = res.data
						// status	状态：ENABLE正常，EXPIRE已过期，DISABLE已停用
						if (this.info?.status == 'EXPIRE') {
							this.transferToAppMask = true
						}
					});
			},
			renew() {
				uni.navigateTo({
					url: "/pages/sys/user/renew"
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			logout() {
				this.$u.api.logout().then(res => {
					this.$u.toast(res.msg);
					if (res.code == '200' || res.code == '401') {
						let self = this;
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/sys/login/index'
							});
						}, 500);
					}
				});
			},
		}
	};
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss">
	@import 'index.scss';

	.username text {
		padding-left: 16rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 28rpx;
		color: #FA4A53;
	}

	.avatar-wrapper {
		background: none !important;
	}

	/deep/ button {
		// background: none !important;
		padding: 0 !important;
		margin: 0 !important;
		// opacity: 0 !important;
		border: none !important;
		outline: none !important;
	}

	/deep/ button::after {
		border: none !important;

	}

	.toAppBox {
		margin: 0 auto;
		width: 670rpx;
		background: #FFFFFF;
		padding: 42rpx 0 60rpx;

		.icons {
			width: 168rpx;
			height: 158rpx;
			display: block;
			margin: 0 auto;
		}

		.end {
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 500;
			font-size: 48rpx;
			color: #FA4A53;
			line-height: 56rpx;
			margin: 10rpx 0 8rpx;
			text-align: center;
		}

		.datas {
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 500;
			font-size: 28rpx;
			color: #0F1417;
			line-height: 33rpx;
			margin-bottom: 40rpx;
			text-align: center;
		}

		.item1 {
			width: 420rpx;
			height: 80rpx;
			margin: 0 auto;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
		}
	}

	// .wrap {

	// 	min-height: 100vh;
	// }

	.wrap .u-cell-box .u-cell_title {
		color: #202328;
	}

	.more {
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.button {


		// display: flex;
		// align-items: center;
		// justify-content: center;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 28rpx;
		color: #FAFDFF;
		// line-height: 44rpx;
		// text-align: left;
		font-style: normal;
		text-transform: none;
		height: 80rpx !important;
		background: #FA4A53 !important;
		box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		margin: 0 40rpx 0;

		// overflow: hidden;
		// .u-size-default{
		// 	outline: none;
		// 	border-radius: 44rpx 44rpx 44rpx 44rpx !important;
		// 	width: 100%;
		// 	height: 100%;
		// 	background-color: #FA4A53 !important;
		// 	color: #FAFDFF !important;
		// 	border-color: none !important;
		// }
	}

	.navList {
		padding: 0 48rpx;

		.item {
			margin-bottom: 84rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				flex: 1;
				display: flex;
				align-items: center;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 32rpx;
				color: #0F1417;
				font-style: normal;
				text-transform: none;

				.icon image {
					display: block;
					width: 48rpx;
					height: 48rpx;
					// margin-top: 2px;
					margin-right: 24rpx;
				}
			}

			.right {}
		}
	}

	// /deep/ .personal-list .u-cell .u-iconfont{
	// 	font-size: 14rpx !important;
	// }
	.sign-in-images {
		display: flex;
		align-items: center;
	}
</style>
